<template>
    <el-header>
        <div class="header-info">
            <div class="header-content">
                <div class="logo-img">
                    <img :src="shop_logo">
                </div>
                <div class="header">
                    <ul class="ul-menu">
                        <el-link type="primary" class='li-menu' :underline="false"  href="/home">首页</el-link>
                        <el-link type="primary" class='li-menu' :underline="false"  href="/home/article">文档</el-link>
                        <el-link type="primary" class='li-menu' :underline="false"  href="/home/timeline">时间轴</el-link>
                        <el-link type="primary" class='li-menu' :underline="false"  href="/home/about">关于</el-link>
                    </ul>
                    <!--消息提醒-->
                    <div class="notice-box">
                        <el-row v-if="messageList.length !== 0">

                            <el-popover
                                    popper-class="personal-popper"
                                    placement="right"
                                    width="400"
                                    trigger="hover">
                                <el-row class="notice-article-box">
                                    <el-row class="notice-article-title">消息</el-row>
                                </el-row>
                                <el-row class="notice-artcle-list">
                                    <el-row  @click.native="toorderlist()">
                                        <a href="javascript:;">您有待配送订单：({{messageList.length}})</a>
                                    </el-row>
                                </el-row>

                                <el-row class="notice-icon" slot="reference" @click.native="toArticle">
                                    <img v-if="this.ismessage == true" src="https://ws-1253783305.image.myqcloud.com/es/backend/v1/notice.png">
                                    <img v-if="this.ismessage == false" src="https://ws-1257960108.file.myqcloud.com/upload/60000/20200921/gyx06dfdpt6xzsk2.png">

                                    <span v-if="messageList.length !== 0">{{messageList.length}}</span>
                                </el-row>
                            </el-popover>
                        </el-row>

                        <div v-else>
                            <el-row class="notice-icon" slot="reference" @click.native="toArticle">
                                <img src="https://ws-1253783305.image.myqcloud.com/es/backend/v1/notice.png">
                                <span v-if="messageList.length !== 0">{{messageList.length}}</span>
                            </el-row>
                        </div>
                    </div>

                    <div class="user-box" >
                        <el-popover popper-class="personal-popper" placement="top" width="170" trigger="hover">
                            <el-row class="entry">
                                <el-row>{{user_name}}</el-row>
                                <el-row>{{user_mobile}}</el-row>
                            </el-row>
                            <el-row class="entry2">
                                <el-row @click.native="openChangeAccount">账号设置</el-row>
                                <el-row @click.native="openChangePwd">密码修改</el-row>
                                <el-row><a href="/home/logout">退出登录</a></el-row>
                            </el-row>
                            <img slot="reference" :src="head_pic">
                        </el-popover>
                    </div>

                </div>
            </div>

            <!--空-->
            <el-row class="header-empty"></el-row>

            <el-dialog title="账户设置" :visible.sync="dialogChangeAccountVisible" v-loading="accountLoading" width="460px">
                <el-form label-width="100px" :model="accountForm" :rules="accountFormRules" ref="accountForm">
                    <el-form-item label="账号">
                        <el-col :span="12">{{user_mobile}}</el-col>
                    </el-form-item>
                    <el-form-item label="姓名" prop="full_name">
                        <el-col :span="12">
                            <el-input  auto-complete="off" v-model="accountForm.full_name" clearable></el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="性别">
                        <el-radio-group v-model="accountForm.sexy">
                            <el-radio :label="1">男</el-radio>
                            <el-radio :label="2">女</el-radio>
                            <el-radio :label="0">保密</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="头像" >
                        <el-upload
                                :data="upload"
                                class="avatar-uploader"
                                action="/components/upload"
                                :show-file-list="false"
                                :on-success="headPicUploadSuccess">
                            <img v-if="accountForm.head_pic" :src="accountForm.head_pic" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                </el-form>
                <el-row slot="footer" class="dialog-footer">
                    <el-button @click="cancelChangeAccount">取消</el-button>
                    <el-button type="primary" @click="changeAccount">保存</el-button>
                </el-row>
            </el-dialog>

            <el-dialog title="修改密码" :visible.sync="dialogChangePwdVisible" v-loading="pwdLoading" width="460px">
                <el-form label-width="100px" :model="pwdForm"  :rules="pwdFormRules" ref="pwdForm">
                    <el-form-item prop="old_pwd" label="旧密码">
                        <el-col :span="20">
                            <el-input type="password" v-model="pwdForm.old_pwd" placeholder="请输入旧密码" clearable></el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item prop="new_pwd" label="新密码">
                        <el-col :span="20">
                            <el-input type="password" v-model="pwdForm.new_pwd" placeholder="请输入新密码" clearable></el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item prop="confirm_pwd" label="确认新密码">
                        <el-col :span="20">
                            <el-input type="password" v-model="pwdForm.confirm_pwd" placeholder="请再次输入新密码" clearable></el-input>
                        </el-col>
                    </el-form-item>
                </el-form>
                <el-row slot="footer" class="dialog-footer">
                    <el-button @click="cancelChangePwd">取消</el-button>
                    <el-button type="primary" @click="changePwd">保存</el-button>
                </el-row>
            </el-dialog>

        </div>

    </el-header>

</template>

<script type="text/javascript">

    export default{
        props: {
            message_id: {
                default: 0
            }
        },
        data() {

            let checkPwd  = (rule, value, callback) => {
                if (this.pwdForm.new_pwd !== this.pwdForm.confirm_pwd) {
                    return callback(new Error('两次输入的密码不一致'));
                } else {
                    callback();
                }
            };

            return {
                gridData: [{

                }],
                
                shop_logo: window.shop_logo,
                store_list: window.store_list,
                store_id: Number(window.store_id),

                user_name: window.user.name,
                user_mobile: window.user.mobile,
                head_pic: window.user.head_pic,

                //productList: window.product_list,

                productList: [1,2],


                //修改密码
                pwdLoading: false,
                dialogChangePwdVisible: false,
                pwdForm: {
                    old_pwd: '',
                    new_pwd: '',
                    confirm_pwd:''
                },
                pwdFormRules: {
                    old_pwd: [
                        { required: true, message: '请输入旧密码', trigger: 'blur' }
                    ],
                    new_pwd: [
                        { required: true, message: '请输入新密码', trigger: 'blur' }
                    ],
                    confirm_pwd: [
                        { required: true, message: '请再次输入新密码', trigger: 'blur' },
                        { validator: checkPwd, trigger: 'blur' }
                    ]
                },
                ismessage:true,


                //修改账户
                accountLoading: false,
                dialogChangeAccountVisible: false,
                accountForm: {
                    full_name: window.user.name,
                    sexy: window.user.sexy,
                    head_pic: window.user.head_pic
                },
                accountFormRules: {
                    full_name: [
                        { required: true, message: '请输入姓名', trigger: 'blur' }
                    ]
                },
                upload: {
                    _token: window.csrf_token,
                },

                fileList: [],

                messageList:[],
                timer:'',
            }
        },
        mounted () {
            this.noticeMessage();
            if(this.messageList){
                this.timer = setInterval(this.noticeMessage, 180000);
            }

        },
        beforeDestroy() {
            clearInterval(this.timer);
        },
        watch:{
            message_id: {
                handler (val) {
                    if (val !== 0) {
                        this.noticeMessage();
                    }
                }
            },

        },
        methods: {
            noticeMessage() {
                /*
                this.$http.get('/message/notice/lately').then((res) => {
                    console.log(res.data.data.length);
                    if (res.data.code === 200) {
                        if(res.data.data.length){
                            this.messageList = res.data.data;
                            if(this.ismessage){
                                var audio = new Audio('https://ws-1257960108.file.myqcloud.com/upload/60000/20200921/kuwekfnzcamh8pjc.mpga');
                                audio.play();
                            }
                        }


                    } else {
                        this.$message.error(res.data.message);
                    }
                }).catch((err) => {
                    console.log(err);
                })
                */
            },

            toArticle() {
                //this.$router.push('/home/notice/list');
                this.ismessage = !this.ismessage;
            },
            toorderlist(){
                window.location.href="/home/distributorss/1";
                //this.$router.push({path: "/home/order", params: {is_distributorss: 1}})
            },
            openChangeAccount() {
                this.dialogChangeAccountVisible = true;
            },

            cancelChangeAccount() {
                this.$refs.accountForm.clearValidate();
                this.dialogChangeAccountVisible = false;
            },

            headPicUploadSuccess(row) {
                if (row.code === 200) {
                    this.accountForm.head_pic = row.data.url;
                } else {
                    this.$message.error(row.message);
                }
            },

            changeAccount() {
                this.$refs.accountForm.validate((valid) => {
                    if (valid) {
                        this.accountLoading = true;
                        this.$http.post('/user/modify', this.accountForm).then((res) => {
                            this.accountLoading = false;
                            if (res.data.code === 200) {
                                this.$message({
                                    type: 'success',
                                    message: '保存成功'
                                });
                                this.cancelChangeAccount();
                                this.user_name = this.accountForm.full_name;
                                this.head_pic = this.accountForm.head_pic;
                            } else {
                                this.$message.error(res.data.message);
                            }
                        }).catch((err) => {
                            console.log(err);
                        });
                    } else {
                        return false;
                    }
                });
            },

            openChangePwd() {
                this.dialogChangePwdVisible = true;
            },

            cancelChangePwd() {
                this.dialogChangePwdVisible = false;
                this.pwdForm = {
                    old_pwd: '',
                    new_pwd: '',
                    confirm_pwd: ''
                };
                this.$refs.pwdForm.clearValidate();
            },

            changePwd() {

                this.$refs.pwdForm.validate((valid) => {
                    if (valid) {
                        this.pwdLoading = true;
                        this.$http.get('/user/chang-pwd', {
                            params: {
                                new_pwd: this.pwdForm.new_pwd,
                                old_pwd: this.pwdForm.old_pwd
                            }
                        }).then((res) => {
                            this.pwdLoading = false;
                            if (res.data.code === 200) {

                                this.$message({
                                    type: 'success',
                                    message: '密码修改成功'
                                });
                                this.cancelChangePwd();

                            } else {
                                this.$message.error(res.data.message);
                            }
                        }).catch((err) => {
                            this.$message.error('修改密码失败，错误信息：' + err);
                        });
                    }
                });

            },
            changeStore(val){
                window.location.href = '?global_change_store_id='+val;
            }

        }

    }
</script>
<style>
.el-header{
    min-width:850px;
}
.ul-menu {
    text-align:center;
}
.li-menu {
    font-size:20px;
    padding-left:10px;
}
</style>
<style scoped>

    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 130px;
        height: 130px;
        line-height: 130px;
        text-align: center;
    }
    .avatar {
        width: 130px;
        height: 130px;
        display: block;
    }

    .header-content{
        position: fixed;
        top:0;
        left: 0;
        z-index: 999;
        background: #fff;
        width: 100%;
    }
    .header-empty{
        height: 60px;
    }
    .header{
        overflow: hidden;
        border-bottom: 1px solid #f2f7fa;
    }
    .el-header .logo-img {
        width: 70px;
        height: 60px;
        float: left;
       /* border-right: 1px solid #d5d5d5;*/
    }
    .el-header .logo-img img {
        width: 34px;
        height: 34px;
        margin: 13px auto;
        display: block;
        border-radius:50%;
        -o-border-radius: 50%;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        box-shadow: 0 6px 5px #dfdfdf;
    }
    .support{
        display: inline-block;
        margin-right: 20px
    }
    .support img{
        position: relative;
        top: 2px;
        margin-right: 8px;
    }
    .user{
        width: 25px;
        position: relative;
        left: -5px;
        top: 8px;
    }
    .header .el-dropdown-menu{
        margin-top: 5px !important
    }
    .header .el-dropdown{
        display: none;
        float: left;
        margin: 0 60px 0 10px;
        box-sizing: border-box;
    }
    .header .el-dropdown>span{
         overflow: hidden;
         max-width: 150px;
         text-overflow: ellipsis;
         display: block;
         height: 59px;
         line-height:59px;
         text-align: left;
         padding-right:15px;
         box-sizing: border-box;
     }
    .header .el-icon--right{
        position: absolute;
        right: 0;
        top: 0;
        height: 60px;
        line-height: 60px;
    }
    .header .el-dropdown-menu .popper__arrow{
        display: none
    }
    /*el-menu*/
    .header .el-menu {
        overflow: hidden;
        height: 59px;
    }
    .header .el-menu--horizontal>.el-menu-item{
        color:#8a8a8a;
        padding: 0;
        height: 30px;
        line-height: 30px;
        margin: 15px 5px;
        padding:0 20px;
        border-radius: 15px;
    }
    .header .el-menu--horizontal>.el-menu-item:first-child {
        margin-left: 0;
    }
    .header .el-menu--horizontal>el-menu-item:nth-child(2){
        display:none;
    }
    .header .el-menu-item.item.current{
        background: #437cff;
        color: #fff;
        box-shadow: 0 2px 4px #dbe6ff;
    }
    .header .el-menu--horizontal.item .el-menu-item:not(.is-disabled):focus, .header .el-menu--horizontal.item .el-menu-item:not(.is-disabled):hover{
        background: #437cff;
        color: #fff;
        box-shadow: 0 2px 4px #dbe6ff;
    }
    .header .el-menu--horizontal{
        border-bottom:none;
    }

    .user-box{
        position: fixed ;
        top: 0;
        right: 0;
        width:80px;
        height: 59px;
    }
    .user-box img{
        width: 30px;
        height: 30px;
        display: block;
        margin: 20px auto;
    }
    .notice-box{
        position: fixed;
        top: 0;
        right: 60px;
        width:80px;
        height: 59px;
    }
    .notice-icon{
        width:24px;
        height:24px;
        display: block;
        margin:25px auto;
        position: relative;
        cursor: pointer;
    }
    .notice-icon img{
        width:24px;
        height:24px;
        display: block;
    }
    .notice-icon span{
        position: absolute;
        top:-4px;
        right:-4px;
        display: inline-block;
        width:16px;
        height:16px;
        background: #ff2a2b;
        line-height: 16px;
        border-radius: 50%;
        color:#fff;
        text-align: center;
        font-size: 12px;
    }
    .notice-article-box{
        overflow:hidden;
        clear: both;
        padding: 10px 10px 5px;
        border-bottom:1px solid #ececec;
    }
    .notice-article-box .notice-article-title{
        color:#437cff;
    }
    .notice-artcle-list{
        padding:10px;
    }
    .notice-artcle-list a{
        padding-bottom:5px;
        display: block;
        font-size:12px;
        color:#437cff;

    }
    .notice-artcle-list a:last-child{
        padding-bottom:0
    }
    .article-box-info{
        margin:20px;
    }
    
</style>
